<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<el-input class="x_soso" v-model="searchInput" placeholder="请输入管理员名称搜索"></el-input>
				<el-select class="x_soso" filterable v-model="ruleForm.manageID" placeholder="按归属组织机构搜索" @change="changeManageValue">
					<el-option v-for="item in rankList" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
				</el-select>
				<el-select class="x_soso" filterable v-model="ruleForm.companyId" placeholder="选择归属组织机构角色">
					<el-option v-for="item in roleListManage" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
				</el-select>
				<el-select class="x_soso" filterable v-model="search.title" placeholder="按停启用状态搜索">
					<el-option v-for="item in openList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-button type="primary" @click="searchList">查询</el-button>
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="reloadVal">刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					新增管理员
				</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table @sort-change='sortChange' v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="登录账户" align="center" width="150" prop="account"></el-table-column>
				<el-table-column label="真实姓名" align="center" width="150" prop="userName"></el-table-column>
				<el-table-column label="手机号" align="center" width="150" prop="phoneNumber"></el-table-column>
				<el-table-column label="微信号" align="center" width="150" prop="weChatNumber"></el-table-column>
				<el-table-column label="角色" align="center" width="150" prop="roleName"></el-table-column>
				<!-- <el-table-column label="工号" align="center" width="150" prop="jobNumber"></el-table-column> -->
				<el-table-column label="归属组织机构" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="备注" align="center" width="150" prop="note"></el-table-column>
				<el-table-column label="创建时间" :sortable="'custom'" align="center" width="200" prop="createTime"></el-table-column>
				<el-table-column label="最后一次编辑时间" :sortable="'custom'" align="center" width="200" prop="updateTime"></el-table-column>
				<el-table-column label="是否绑定微信" align="center" width="150" prop="isBindWeChat">
					<template slot-scope="scope">
						<span v-if="scope.row.isBindWeChat == true">已绑定</span>
						<span v-if="scope.row.isBindWeChat == false">未绑定</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<div v-if="scope.row.userId == 'admin'"></div>
						<el-switch
							v-else
							v-model="scope.row.isEnabled"
							active-color="#13ce66"
							inactive-color="#dedede"
							:active-value="true"
							:inactive-value="false"
							@change="changeSwitch(scope.$index, scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="250">
					<template slot-scope="scope">
						<div v-if="scope.row.userId == 'admin'"></div>
						<div v-else>
							<el-button @click="weChatImgData(scope.row)" icon="el-icon-edit" type="warning" size="small">绑定微信</el-button>
							<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page.page"
					:page-size="page.pagesize"
					layout="prev, pager, next, jumper, total"
					:total="page.count"
				></el-pagination>
			</div>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="归属组织机构" prop="name">
					<el-select filterable v-model="ruleForm.schemeId" style="width: 100%;" placeholder="按归属组织机构搜索" @change="changeManageValue">
						<el-option v-for="item in rankList" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="归属机构角色" prop="name">
					<el-select filterable v-model="ruleForm.roleName" style="width: 100%;" placeholder="选择归属组织机构角色">
						<el-option v-for="item in roleListManage" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name"><el-input v-model="ruleForm.realName" placeholder="请输入真实姓名" maxlength="20"></el-input></el-form-item>
				<el-form-item label="账户名称" prop="name"><el-input v-model="ruleForm.account" placeholder="请输入账户名称" maxlength="20"></el-input></el-form-item>
				<el-form-item label="手机号" prop="name">
					<el-input onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")' v-model="ruleForm.phoneNumber" maxlength="11" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="name"><el-input v-model="ruleForm.password" maxlength="18" placeholder="请输入密码"></el-input></el-form-item>
				<el-form-item label="备注" prop="name">
					<el-input maxlength="100" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="ruleForm.textarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">保存</el-button>
			</span>
		</el-dialog>
		<el-dialog title :visible.sync="dialogColor" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm2" ref="ruleForm2" align="left" label-width="100px" class="demo-ruleForm">
				<el-form-item label="归属组织机构" prop="name">
					<el-select filterable v-model="schemeName" disabled style="width: 100%;" placeholder="按归属组织机构搜索" @change="changeManageValue">
						<el-option v-for="item in rankList" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="归属机构角色" prop="name">
					<el-select filterable v-model="roleId" style="width: 100%;" placeholder="选择归属组织机构角色">
						<el-option v-for="item in roleListManage" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name"><el-input v-model="realName" placeholder="请输入真实姓名" maxlength="20"></el-input></el-form-item>
				<el-form-item label="账户名称" prop="name"><el-input v-model="editorAccount" maxlength="20" placeholder="请输入账户名称"></el-input></el-form-item>
				<el-form-item label="手机号" prop="name">
					<el-input onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")' v-model="editorPhoneNumber" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="name"><el-input v-model="editorPassWord" maxlength="18" :value="editorPassWord" placeholder="请输入密码"></el-input></el-form-item>
				<el-form-item label="备注" prop="name">
					<el-input maxlength="100" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="editorTextarea==undefined?'':editorTextarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor = false">取 消</el-button>
				<el-button type="primary" @click="submitForm2()">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog title :visible.sync="dialogWeChat" width="500px">
			<div style="margin-bottom: 20px;">绑定更换微信</div>
			<img class="chatImg" :src="imgUrl" alt />
			<span slot="footer" class="dialog-footer"><el-button @click="dialogWeChat = false">取 消</el-button></span>
		</el-dialog>
	</div>
</template>

<script>
import { getManageList, setDownState, saveManage, editorManage, editorManageSave, getAllList, roleList, weChatImg } from '../../../server/index.js';
import Cookie from 'js-cookie';
export default {
	inject: ['reload'],
	data() {
		return {
			valueDate: [],
			//查询
			searchInput: '',
			search: {},
			tableData: [],
			loading: true,
			rankList: [],
			roleListManage: [],
			schemeId: '', // 组织机构ID
			roleId: '',
			account: '',
			phoneNumber: '',
			password: '',
			textarea: '',
			cname: '',
			realName: '',
			page: {
				count: 0,
				pagesize: 10,
				page: 1
			},
			dialogVisible: false,
			dialogColor: false,
			// 编辑
			schemeName: '',
			roleName: '',
			editorAccount: '',
			editorPhoneNumber: '',
			editorPassWord: '',
			editorTextarea: '',
			userId: '',
			openList: [
				{
					id: 0,
					name: '停用'
				},
				{
					id: 1,
					name: '启用'
				}
			],

			options: [],
			ruleForm: {},
			ruleForm2: {},
			flmc: '',
			dialogWeChat: false,
			imgUrl: ''
		};
	},
	mounted() {
		var page = 1;
		let _this = this;
		_this.columnFind(page);
		_this.getListData();
		Cookie.remove('tabList');
	},
	methods: {
		// 刷新方法
		reloadVal() {
			this.reload();
		},
		sortChange(sortData) {
			console.log(sortData)
			let orderBy;
			if(sortData.order != null){
				orderBy = sortData.prop;
				if(sortData.order == 'ascending'){
					orderBy += ' asc';
				}else{
					orderBy += ' desc';
				}
			}
			this.columnFind(1,orderBy);
		},
		// 查询、
		searchList() {
			const _this = this;
			let startTime = _this.valueDate[0];
			let endTime = _this.valueDate[1];
			// _this.page.page = page;
			let obj = {
				page: _this.page.page,
				rows: _this.page.pagesize,
				keyword: undefined == _this.searchInput ? '' : _this.searchInput,
				schemeId: _this.ruleForm.manageID == undefined ? '' : _this.ruleForm.manageID,
				roleId: _this.ruleForm.companyId == undefined ? '' : _this.ruleForm.companyId,
				isEnabled: _this.search.title == undefined ? '' : _this.search.title,
				startTime: undefined == startTime ? '' : startTime,
				endTime: undefined == endTime ? '' : endTime
			};
			_this.http.request({
				url: getManageList,
				data: obj,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 列表数据
		columnFind(page,orderFlag) {
			const _this = this;
			_this.page.page = page;

			let obj = {
				page: _this.page.page,
				rows: _this.page.pagesize,
				keyword: '',
				orderBy: undefined == orderFlag ? '' : orderFlag,
			};
			_this.http.request({
				url: getManageList,
				data: obj,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 听启用
		changeSwitch(index, row) {
			const _this = this;
			let isEnabled = '';
			if (row.isEnabled == true) {
				isEnabled = 1;
			} else {
				isEnabled = 0;
			}
			let dataMsg = {
				userId: row.userId,
				status: isEnabled
			};
			_this.http.request({
				url: setDownState,
				data: dataMsg,
				success: function(res) {
					if (res == 1) {
						row.isEnabled = true;
					} else {
						row.isEnabled = false;
					}
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 选择组织机构
		changeManageValue(val) {
			let obj = {};
			let _this = this;
			obj = _this.rankList.find(item => {
				if (val == item.schemeId) {
					return item.schemeId;
				}
			});
			_this.schemeId = obj.schemeId;
			_this.roleManageList(_this.schemeId);
		},
		getListData() {
			const _this = this;
			this.http.request({
				url: getAllList,
				data: '',
				method: 'GET',
				success: function(res) {
					_this.rankList = res;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 角色
		roleManageList(schemeId) {
			const _this = this;
			this.http.request({
				url: roleList,
				data: {
					schemeId: schemeId
				},
				success: function(res) {
					_this.roleListManage = res;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 新增管理员
		addColumnClick() {
			this.ruleForm = {};
			this.dialogVisible = true;
			this.cname = '新增管理员';
		},
		submitForm() {
			const _this = this;
			if (!_this.ruleForm.schemeId) {
				_this.$message({
					offset: '200',
					message: '请选择归属组织机构'
				});
				return;
			}
			if (!_this.ruleForm.roleName) {
				_this.$message({
					offset: '200',
					message: '请选择归属角色'
				});
				return;
			}
			if (!_this.ruleForm.realName) {
				_this.$message({
					offset: '200',
					message: '请输入真实姓名'
				});
				return;
			}
			if (!_this.ruleForm.account) {
				_this.$message({
					offset: '200',
					message: '请输入账户名称'
				});
				return;
			}
			var phoneNum;
			let reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
			if (_this.ruleForm.phoneNumber == '' || !reg.test(_this.ruleForm.phoneNumber)) {
				_this.$message({
					offset: '200',
					message: '请输入正确的手机号'
				});
				return false;
			} else {
				phoneNum = _this.ruleForm.phoneNumber;
			}
			var str=/^[a-zA-Z0-9]{6,18}$/;
			if (_this.ruleForm.password == '' || !str.test(_this.ruleForm.password)) {
				_this.$message({
					offset: '200',
					message: '请输入密码'
				});
				return;
			}
			let dataMsg = {
				schemeId: _this.ruleForm.schemeId,
				roleId: _this.ruleForm.roleName,
				account: _this.ruleForm.account,
				userName: _this.ruleForm.realName,
				phoneNumber: phoneNum,
				password: _this.ruleForm.password,
				note: _this.ruleForm.textarea==undefined?'':_this.ruleForm.textarea
			};
			_this.http.request({
				url: saveManage,
				data: dataMsg,
				success: function() {
					_this.dialogVisible = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},

		// 编辑
		cellClick(row) {
			const _this = this;
			this.cname = '编辑管理员';
			this.dialogColor = true;
			_this.userId = row.userId;
			this.http.request({
				url: roleList,
				data: {
					schemeId: row.schemeId
				},
				success: function(res) {
					_this.roleListManage = res;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});

			this.http.request({
				url: editorManage,
				data: {
					userId: row.userId
				},
				success: function(res) {
					_this.schemeId = res.schemeId;
					_this.roleId = res.roleId;
					_this.schemeName = res.schemeName;
					_this.realName = res.userName;
					_this.editorAccount = res.account;
					_this.editorPhoneNumber = res.phoneNumber;
					_this.editorPassWord = res.password;
					_this.editorTextarea = res.note;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		submitForm2() {
			const _this = this;
			if (!_this.schemeId) {
				_this.$message({
					offset: '200',
					message: '请选择归属组织机构'
				});
				return;
			}
			if (!_this.roleId) {
				_this.$message({
					offset: '200',
					message: '请选择归属角色修改'
				});
				return;
			}
			if (!_this.realName) {
				_this.$message({
					offset: '200',
					message: '请输入真实姓名'
				});
				return;
			}
			if (!_this.editorAccount) {
				_this.$message({
					offset: '200',
					message: '请输入账户名称'
				});
				return;
			}
			var phoneNum;
			let reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
			if (_this.editorPhoneNumber == '' || _this.editorPhoneNumber.length <= 10 || !reg.test(_this.editorPhoneNumber)) {
				_this.$message({
					offset: '200',
					message: '请输入手机号'
				});
				return false;
			} else {
				phoneNum = _this.editorPhoneNumber;
			}
			console.log("修改密码="+_this.editorPassWord)
			var str=/^[a-zA-Z0-9]{6,18}$/;
			if (_this.editorPassWord== '' || !str.test(_this.editorPassWord)) {
				_this.$message({
					offset: '200',
					message: '请输入密码'
				});
				return;
			}

			
			let dataMsg = {
				userId: _this.userId,
				schemeId: _this.schemeId,
				roleId: _this.roleId,
				userName: _this.realName,
				account: _this.editorAccount,
				phoneNumber: phoneNum,
				password: _this.editorPassWord,
				note: _this.editorTextarea
			};
			this.http.request({
				url: editorManageSave,
				data: dataMsg,
				success: function() {
					_this.dialogColor = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 绑定微信
		weChatImgData(row) {
			const _this = this;
			_this.userId = row.userId;
			_this.dialogWeChat = true;
			this.http.request({
				url: weChatImg,
				data: {
					userId: row.userId
				},
				success: function(res) {
					_this.imgUrl = res.qrCodeUrl;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
			
			
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.el-button--primary {
	background: rgba(113, 106, 202, 1);
	border: none;
}

.el-button--primary:hover {
	color: #606266;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(113, 106, 202, 1);
}

.el-button--warning {
	color: #fff;
	background-color: #f4516c;
	border-color: #f4516c;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.createFollowCheck input[type='number'] {
	-moz-appearance: textfield;
}
</style>
